<template>
    <div>
        <h1>test</h1>
        <el-button @click="testforceupdate">测试$forceUpdate</el-button>
        <reset-a></reset-a>
        <reset-b>
            <h1>上课注意听课</h1>
        </reset-b>
        <el-button @click="show = !show">v-if 强制刷新</el-button>
        <reset-vif v-if="show"></reset-vif>
        <hr>
        <reset-key :key="initKey" @resetKey="resetKey"></reset-key>
        <input-file-reader></input-file-reader>
    </div>
</template>

<script>
import InputFileReader from "../../../components/TestReset/InputFileReader.vue";
import ResetA from "../../../components/TestReset/ResetA.vue";
import ResetB from "../../../components/TestReset/ResetB.vue";
import ResetKey from "../../../components/TestReset/ResetKey.vue";
import ResetVif from "../../../components/TestReset/ResetVif.vue";
    export default {
        data(){
            return{
                show:true,
                initKey:"yangyang",
            };
        },
        components:{ ResetA,ResetB,ResetVif,ResetKey,InputFileReader},
        methods:{
            testforceupdate(){
                this.$forceUpdate();
            },
            resetKey(key){
                this.initKey = key;
            },
        },
        beforeCreate() {
            console.log("A beforeCreate");
        },
        created() {
            console.log("A created");
        },
        beforeMount() {
            console.log("A beforeMount");
        },
        mounted() {
            console.log("A mounted");
        },
        beforeUpdate() {
            console.log("A beforeUpdate");
        },
        updated() {
            console.log("A updated");
        },
        beforeDestroy() {
            console.log("A beforeDestroy");
        },
        destroyed() {
            console.log("A destroyed");
        },
    };
</script>

<style lang="less" scoped>
div{
    height: 100px;
}
</style>